<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父子组件及组件间数据传递</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		<my-hello></my-hello>
	</div>
	
	<template id="hello">
		<div>
			<h3>我是hello父组件</h3>
			<h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3>
			<h3>访问子组件的数据：{{sex}},{{height}}</h3>
			<hr>

			<my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
		</div>
	</template>

	<template id="world">
		<div>
			<h4>我是world子组件</h4>
			<h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4>
			<h4>访问自己的数据：{{sex}},{{height}}</h4>
			<button @click="send">将子组件的数据向上传递给父组件</button>
		</div>
	</template>

	<script>
		var vm=new Vue({ //根组件
			el:'#itany',
			components:{
				'my-hello':{  //父组件
					methods:{
						getData(sex,height){
							this.sex=sex;
							this.height=height;
						}
					},
					data(){
						return {
							msg:'网博',
							name:'tom',
							age:23,
							user:{id:9527,username:'唐伯虎'},
							sex:'',
							height:''
						}
					},
					template:'#hello',
					components:{
						'my-world':{ //子组件
							data(){
								return {
									sex:'male',
									height:180.5
								}
							},
							template:'#world',
							// props:['message','name','age','user'] //简单的字符串数组
							props:{ //也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
								message:String,
								name:{
									type:String,
									required:true
								},
								age:{
									type:Number,
									default:18,
									validator:function(value){
										return value>=0;
									}
								},
								user:{
									type:Object,
									default:function(){ //对象或数组的默认值必须使用函数的形式来返回
										return {id:3306,username:'秋香'};
									}
								}
							},
							methods:{
								send(){
									// console.log(this);  //此处的this表示当前子组件实例
									this.$emit('e-world',this.sex,this.height); //使用$emit()触发一个事件，发送数据
								}
							}
						}
					}
				}
			}
		});	
	</script>
</body>
</html>